<template>
  <page-frame>
    <div class="editRoomStandard">
      <div class="toptitle">
        <div class="left">房间标准 - {{ isAddMode() ? '新建' : '编辑'}}标准<span class="room-left">*</span></div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="submitForm('roomStandard')">保存全部</el-button>
            <el-button @click="toRoomStandard">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>

      <el-row>
        <el-col :span="12">
          <el-form :model="roomStandard" :rules="rules" ref="roomStandard" label-width="120px" v-if="roomStandard">
            <div class="room-info-left">房间标准信息</div>
            <el-form-item style="margin-top: 100px" label="房间类型" prop="rmTypeId">
              <el-select v-model="roomStandard.rmTypeId" placeholder="请输入房间类型">
                <el-option
                  v-for="item in roomTypes"
                  :label="item.rmTypeName"
                  :value="item.rmTypeId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="房间标准名称" prop="rmStdName">
              <el-input placeholder="请输入房间标准名称" v-model="roomStandard.rmStdName"></el-input>
            </el-form-item>
            <el-form-item label="床位数"  prop="bedCount" v-if="roomStandard.rmTypeId === ROOM_TYPE.BEDROOM">
              <el-input class="input-style" v-model="roomStandard.bedCount" :disabled="true"></el-input>
              <span class="span-style">张</span>
            </el-form-item>
            <el-form-item label="床位单价" prop="price" v-if="roomStandard.rmTypeId === ROOM_TYPE.BEDROOM" >
              <el-input class="input-style" placeholder="请输入床位单价" v-model="roomStandard.price"></el-input>
              <span class="span-style">￥</span>
            </el-form-item>
            <el-form-item label="面积" prop="rmStdArea">
              <el-input class="input-style" placeholder="请输入面积" v-model="roomStandard.rmStdArea"></el-input>
              <span class="span-style">㎡</span>
            </el-form-item>
            <el-form-item v-for="(eq, index) in roomStandard.rmEq" :label="index === 0 ? '房间配备' : ''">
              <el-input v-model="roomStandard.rmEq[index]"></el-input>
              <el-button class="button-style" @click.prevent="removeEq(index)">删除</el-button>
            </el-form-item>
            <el-form-item :label="roomStandard.rmEq.length === 0 ? '房间配备' : ''">
              <el-input placeholder="请输入要添加的房间配备" v-model="newEq"></el-input>
              <el-button class="button-style" @click.prevent="addEq">新增设备</el-button>
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input placeholder="请输入描述" v-model="roomStandard.description"></el-input>
            </el-form-item>
          </el-form>

        </el-col>
        <el-col :span="12">
          <bedArrangement class="bedEdit" ref="bedArrangement"
                          v-if="initFinished && (roomStandard.rmTypeId === ROOM_TYPE.BEDROOM)"
                           :bedsJson="roomStandard.bedGeometry"
                          @bedCountChange="bedCountChange"
          />
        </el-col>
      </el-row>

    </div>
  </page-frame>
</template>

<script>
  import bedArrangement from '../../components/room/bedArrangement.vue'
  import roomApi from '../../service/corporation/roomApi'
  import {ROOM_TYPE} from '../../constants/roomConstants'
  export default {
    data () {
      return {
        roomStandard: {
          rmStdId: "",
          rmStdName: "",
          rmTypeId: "",
          rmTypeName: "",
          price: "",
          bedCount: "",
          bedGeometry: "",
          rmStdArea: "",
          rmEq: [],
          description: "",
        },
        rules:{
          rmStdName: [
            { required: true, message: '请输入房间标准名称', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入床位单价', trigger: 'blur' }
          ]
        },
        roomTypes: [],
        newEq: "",
        submitData: "",
        ROOM_TYPE,
        initFinished: false,
      }
    },
    methods: {
      init() {
        this.initFinished = false;
        this.getData();
      },
      getData() {
        roomApi.getRoomTypes().then(res => {
          this.roomTypes = res.body.data;
          if(this.roomTypes.length > 0) {
            this.roomStandard.rmTypeId = this.roomTypes[0].rmTypeId;
          }
        }, res => {});
        if(!this.isAddMode()) {
          roomApi.getRoomStandard(this.$route.params.rmStdId).then(res => {
            this.roomStandard = res.body.data;
            this.handleGetData();
          }, res => {});
        }
        this.initFinished = true;
      },
      handleGetData() {
        this.roomStandard.rmEq = this.roomStandard.rmEq ? this.roomStandard.rmEq.split(",") : [];
      },
      handleSubmitData() {
        this.submitData = Object.assign({}, this.roomStandard);
        this.submitData.rmEq = this.submitData.rmEq.join(",");
        if(this.roomStandard.rmTypeId === ROOM_TYPE.BEDROOM) {
          this.submitData.bedGeometry = JSON.stringify(this.$refs.bedArrangement.beds);
        }
      },
      addEq() {
        this.roomStandard.rmEq.push(this.newEq);
        this.newEq = "";
      },
      removeEq(index) {
        this.roomStandard.rmEq.splice(index, 1);
      },
      toRoomStandard() {
        this.$router.push({name: 'roomStandard'});
      },
      submitForm(formName) {
        let self = this;
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.handleSubmitData();
            roomApi.addOrUpdateRoomStandard(self.submitData).then(res => {
              self.$message({
                type: 'success',
                message: '提交成功!'
              }, res => {});
              self.$router.push({name: "roomStandard"});
            }, res => {});
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      isAddMode() {
        if(this.$route.name === "addRoomStandard") {
            return true;
        } else {
            return false;
        }
      },
      bedCountChange(count) {
        this.roomStandard.bedCount = count;
      }
    },
    mounted: function () {
      this.init();
    },
    components: {bedArrangement}
  }
</script>
<style>
  .editRoomStandard .span-style {
    position: absolute;
    margin-left: 5px;
    color: #8391a5
  }

  .editRoomStandard .button-style {
    width: 90px;
    line-height: 100%;
    position: absolute;
    margin-left: 5px;
  }

  .editRoomStandard .input input {
    display: inline-block;
  }

  .editRoomStandard .room-left {
    font-size: 14px;
    color: red;
    margin-left: 10px;
  }

  .editRoomStandard .room-info-left {
    font-size: 20px;
    margin: 60px 0 60px 20px;
  }

  .editRoomStandard .input-style {
    width: 50% !important;
  }

  .editRoomStandard .el-form-item__label {
    font-size: 16px;
  }
</style>
